<template>
  <div class="home">
    <h1>模板功能测试</h1>
    <ul>
      <li>
        <div v-copy="'www.baidu.com'">测试自定义指令v-copy，点击我可以复制百度网址</div>
      </li>
      <li>
        <el-button plain @click="open2"> 跳转错误页</el-button>
      </li>
      <li>
        <el-button type="primary" @click="getStatistic">尝试请求接口获取数据</el-button>
        <span v-show="Object.keys(resData.result).length > 0">拿到的数据：{{ resData }}</span>
      </li>
      <li>使用pinia的数据：count的值{{ store.count }}</li>
      <li>
        <el-button type="success" @click="store.increment()">使用pinia的方法改变count</el-button>
      </li>
      <li>
        响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算响应式布局啊实打实打算
      </li>
    </ul>
  </div>
</template>
<script setup>
import { homeGetStatistic } from '@/api/home'
import { useCounterStore } from '../stores/counter'
const router = useRouter()
const open2 = () => {
  ElNotification({
    title: '出了点意外哦',
    message: '没有找到页面',
    duration: 500
  })
  router.push('./error')
}
let resData = reactive({ result: {} })
console.log(resData.result)
// 获取文章数、分类数、标签数
const getStatistic = async () => {
  let res = await homeGetStatistic()
  if (res.code == 0) {
    resData.result = res.result
  }
}
const store = useCounterStore()
console.log(store.count, store.increment())
</script>
<style lang="scss">
.home {
  width: 100vw;
  height: 100vh;
  background-color: rgb(195, 247, 229);
  li {
    margin-bottom: 20px;
  }
}
</style>
